<template>
  <div class="zl-attr-item">
    <div class="zl-attr-item-body" @click.stop="toggleColorPanel">
      <span class="zl-attr-item__title">
        <template v-if="graphType === 'table'"> 字体颜色 </template>
        <template v-else>颜色</template>
      </span>
    </div>
    <div class="zl-color-panel" :class="{'show': colorPanelShow}">
      <div class="zl-color-way">
        <span class="zl-color-way__title">配色方案</span>
        <div class="zl-color-way__body">
          <div class="zl-color-way-info" @click="toggleSeriesPanel">
            <template v-if="series.length === 0">
              <div class="zl-color-way-info__auto">自动</div>
            </template>
            <template v-else>
              <i v-for="seriesColor in series" :key="seriesColor" :style="{backgroundColor: seriesColor}"></i>
            </template>
          </div>
          <ul class="zl-color-way__list" :class="{'show': seriesPanelShow}">
            <li v-for="(seriesItem, seriesTitle) in seriesList" :key="seriesTitle">
              <div class="zl-color-way__item" v-if="seriesTitle === '自动'" @click="setColorSeries(seriesTitle)"><h4></h4><div>自动</div></div>
              <div class="zl-color-way__item" v-else  @click="setColorSeries(seriesTitle)">
                <h4>{{seriesTitle}}</h4>
                <div>
                  <i v-for="seriesColor in seriesItem" :key="seriesColor" :style="{backgroundColor: seriesColor}"></i>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <ul class="zl-color-key" @click="hiddenSeries">
        <li v-for="keyItem in keys" :key="keyItem.id">
          <ColorPicker v-model="keyItem.color" @on-change="handleChange(keyItem)"></ColorPicker>
          <span>{{keyItem.name}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data () {
    return {
      series: ['#79dcfb', '#5aa0f0', '#5c72f6', '#6adca9', '#4db0d6'],
      seriesList: {
        '自动': [],
        '默认': ['#f6c066', '#4eaebf', '#e17b77', '#b75e83', '#9163ae'],
        '彩虹': ['#f8e74d', '#56bb4d', '#3682d5', '#eb4041', '#ef7e31'],
        '轻柔': ['#5ccab3', '#e1e4b3', '#d4866e', '#87b58a', '#a9d4c9'],
        '蓝色': ['#499fd4', '#79b9e2', '#b9d9f0', '#4c8ed8', '#6799e0'],
        '红色': ['#c9335d', '#d66d8d', '#e9b5c2', '#cd4356', '#d6646b'],
        '绿色': ['#70b54d', '#99cc84', '#cae5c0', '#73bd5e', '#88ca7e'],
        '自然': ['#6bb96d', '#76c7eb', '#f08b67', '#85d3c1', '#fbe262'],
        '现代': ['#79dcfb', '#5aa0f0', '#5c72f6', '#6adca9', '#4db0d6']
      },
      colorPanelShow: false,
      seriesPanelShow: false
    }
  },
  props: {
    graphOptions: {
      type: Object,
      default: function() {
        return {}
      }
    },
    numbers: {
      type: Array,
      default: function() {
        return []
      }
    },
    groups: {
      type: Array,
      default: function() {
        return []
      }
    },
    graphType: {
      type: String,
      default: ''
    }
  },
  mounted () {
      this.init()
  },
  computed: {
    keys() {
    	if (this.graphOptions.series && this.numbers.length > 0 && this.numbers.length === this.graphOptions.series.length) {
        let tempKeys = []
        // 表格维度需要设置属性
        if (this.graphType === 'table' && this.graphOptions.others && this.graphOptions.others.tableAttr) {
          this.graphOptions.others.tableAttr.forEach((attr, attrIndex) => {
            tempKeys.push(Object.assign({id: attrIndex}, attr))
          });
          // tempKeys = this.graphOptions.others.tableAttr
        } else if (this.graphType === 'funnel' || this.graphType === 'pie' || this.graphType === 'pie_more') {
          if (this.graphOptions.color) {
            for (let i = 0; i < this.graphOptions.color.length; i++) {
              tempKeys.push({
                id: i,
                name: '',
                color: this.graphOptions.color[i]
              })
            }
            return tempKeys
          }
        } else {
          for (let i = 0; i < this.graphOptions.series.length; i++) {
            const seriesItem = this.graphOptions.series[i];
            tempKeys.push({
              id: this.numbers[i].kpiName,
              name: this.numbers[i].kpiName,
              color: seriesItem.color
            })
          }
        }
        return tempKeys
      } else {
        return []
      }
    },
  },
  methods: {
    hiddenSeries() {
    	this.seriesPanelShow = false
    },
    handleChange() {
      if (this.graphType === 'funnel' || this.graphType === 'pie' || this.graphType === 'pie_more') {
        // 漏斗图控制全局颜色
        let colorArr = []
        for (let i = 0; i < this.keys.length; i++) {
          const key = this.keys[i];
          colorArr.push(key.color)
        }
        this.$emit('changeGraphOptions', 'color', colorArr)
      } else {
        let series = this.graphOptions.series
        if (this.graphOptions.series && this.numbers.length > 0 && this.numbers.length === this.graphOptions.series.length) {
          for (let i = 0; i < series.length; i++) {
            const seriesItem = series[i];
            seriesItem.color = this.keys[i].color
          }
        }
        this.$emit('changeGraphOptions', 'series', series)
      }
    },
    init() {
    	let vm = this
      vm.$nextTick(function () {
        document.addEventListener('click', this.outsideHide)
      })
    },
    // toggle系列面板
    toggleSeriesPanel() {
    	this.seriesPanelShow = !this.seriesPanelShow
    },
    // 设置颜色系列
    setColorSeries(seriesName) {
      this.series = this.seriesList[seriesName]
      if (this.series.length > 0) {
        for (let i = 0; i < this.keys.length; i++) {
          const keyItem = this.keys[i];
          if (i < 5) {
            keyItem.color = this.series[i]
          }
        }
      }
      this.seriesPanelShow = false
      this.handleChange()
    },
    toggleColorPanel() {
      this.colorPanelShow = !this.colorPanelShow
      this.seriesPanelShow = false
    },
    outsideHide(event) {
        let t = event.target
        let isDrop = false
        while(t) {
            if (t.className && typeof t.className === 'string' && t.className.indexOf('zl-color-panel') !== -1) {
                isDrop = true
                break
            }
            t = t.parentNode
        }
        if (!isDrop) {
          this.colorPanelShow = false
        }
    }
  },
  beforeDestroy () {
    document.removeEventListener('click', this.outsideHide)
  }
}
</script>
<style rel="stylesheet/less" lang="less" scoped>
.zl-color-panel {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 9;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 6px;
  width: 180px;
}
.zl-color-panel.show {
  display: block;
}
.zl-color-panel li {
  list-style-type: none;
}
.zl-color-way {
  position: relative;
  line-height: 20px;
  height: 20px;
}
.zl-color-way__list.show {
  display: block;
}
.zl-color-way__list {
  display: none;
  position: absolute;
  top: 20px;
  right: -20px;
  height: 120px;
  overflow: auto;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 6px 8px 6px 8px;
  width: 140px;
}
.zl-color-way__title {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
.zl-color-way__body {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #eee;
  height: 16px;
  padding: 1px;
  cursor: pointer;
}
.zl-color-way__body i {
  display: inline-block;
  vertical-align: top;
  width: 12px;
  height: 12px;
  margin-right: 1px;
}
.zl-color-way__item > div {
  display: inline-block;
  width: 70px;
  border: 1px solid #eee;
  line-height: 12px;
  padding: 1px;
}
.zl-color-way__item h4 {
  display: inline-block;
  width: 30px;
  text-align: right;
  margin: 0;
  color: #333;
}
.zl-color-way__item i {
  display: inline-block;
  vertical-align: top;
  width: 12px;
  height: 12px;
  margin-right: 1px;
}
.zl-color-key {
  border: 1px solid #ddd;
  padding: 8px;
  margin-top: 8px;
  max-height: 120px;
  overflow: auto;
}
.zl-color-key i {
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  margin-right: 1px;
}
.zl-color-key span {
  vertical-align: middle;
}
.zl-color-way-info__auto {
  line-height: 16px;
  margin-top: -2px;
  width: 65px;
  text-align: center;
}
.zl-color-key /deep/ .ivu-input-icon {
  display: none;
}
.zl-color-key /deep/ .ivu-color-picker-input {
  border: none;
  padding: 0;
  height: 18px;
}
.zl-color-key /deep/ .ivu-color-picker-color {
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.zl-color-key /deep/ .ivu-color-picker-confirm .ivu-input-wrapper {
  width: 136px;
}
</style>
